<template>
	<view class="savepadding">
		<uni-list>
			<view class="item" v-for="(item, index) in listData" :key="index">
				<u-form ref="uform" label-width="auto">
					
					
					<u-form-item label="类型" borderBottom @click="typeShowClick(index)">
						<u-input 
						v-model="item.typeName"
						disabled disabledColor="#ffffff"
						inputAlign="right" 
						border="none"
						placeholder="选择类型" 
						></u-input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					
					<u-form-item label="金额" borderBottom>
						<u-input 
						v-model="item.money"
						inputAlign="right" 
						type="digit"
						border="none"
						placeholder="请输入金额" 
						></u-input>
					</u-form-item>
					
					<u-form-item label="付款方式" borderBottom>
						<u-input 
						v-model="item.paymentMethodStr"
						disabled disabledColor="#ffffff"
						inputAlign="right" 
						border="none"
						placeholder="自动获取"
						></u-input>
					</u-form-item>
					
					<u-form-item label="第一次付款日期" borderBottom @click="pickerShowClick(index)" >
						<u-input 
						:value="item.timePayment1st"
					    disabled disabledColor="#ffffff"
					    border="none"
						inputAlign="right" 
						placeholder="请选择付款日期" 
						type="select"
						></u-input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					
				</u-form>
				
				<text v-if="index != 0" class="delete" @click="deletItem(index)">删除</text>
			</view>
			
			<view style="margin: 20rpx; padding-bottom: 130rpx;">
				<button class="list-add" @click="addInsurance">+继续添加</button>
			</view>
			
		</uni-list>
		
		
		<view class="button-container">
			<button class="btn-item" @click="save">保存</button>
		</view>
		
		
		<!-- 类型 -->
		<u-picker :mode="mode" :show="typeShow" :default-selector="[0]" :columns="feeItemList"
			keyName="typeName" @confirm="pickerConfim" @cancel="typeShow=false"></u-picker>
		
		<!-- 保养时间 -->
		<u-datetime-picker
			:show="dateShow"
			mode="date" @confirm="timeConfirm"
			@cancel="dateShow=false"></u-datetime-picker>
		
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				currentIndex:0,
				listData:[{
						typeName: '',
						typeCode: '',
						money: '',
						paymentMethod: '',
						paymentMethodStr: '',
						timePayment1st: '',
					}	
				],
				typeShow:false,
				dateShow:false,
				feeItemList:[]
			}
		},
		
		onLoad(options) {
			
			this.feeItemList = [getApp().globalData.feeItemList]
			
			getApp().globalData.feeItemList = null
			
			if(!uni.$u.test.isEmpty(options.feeItemList)){
				var data = JSON.parse(options.feeItemList);//字符串转对象
				if(data.length > 0) {
					this.listData = data;
				}
			}else{
				this.addInsurance();
			}
		},
		
		methods: {
			
			pickerShowClick(index) {
				this.dateShow = true;
				this.currentIndex = index;
			},
			
			typeShowClick(index) {
				this.typeShow = true;
				this.currentIndex = index;
			},
			
			timeConfirm(e) {
				this.dateShow = false;
				
				let timeStr = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				
				let currentItem = this.listData[this.currentIndex];
				currentItem.timePayment1st = timeStr;
				
			},
			
			//picker回调函数
			pickerConfim(e) {
				this.typeShow = false;
				// let carInfoObjc = this.carInfoList[index];
				let objc = e.value[0];
				
				let currentItem = this.listData[this.currentIndex];
				
				currentItem.typeName=objc.typeName
				currentItem.typeCode=objc.typeCode
				currentItem.paymentMethod=objc.paymentMethod
				currentItem.paymentMethodStr=objc.paymentMethodStr
				
			},
			
			//添加新的险种
			addInsurance() {
				let obj = {
					typeName: '',
					typeCode: '',
					money: '',
					paymentMethod: '',
					paymentMethodStr: '',
					timePayment1st: '',
				}
				this.listData.push(obj);
			},
			
			deletItem(index) {
				this.listData.splice(index, 1);
			},
			
			//保存
			save() {
				
				console.log('this.listData', this.listData);
				
				this.listData = this.listData.filter(
					item => {
						return (!uni.$u.test.isEmpty(item.typeName) && !uni.$u.test.isEmpty(item.money) && !uni.$u.test.isEmpty(item.paymentMethodStr) && !uni.$u.test.isEmpty(item.timePayment1st));
					}
				)
				
				uni.$emit('addFee', this.listData)
				
				uni.navigateBack()
			}
		}
	}
	
</script>

<style lang="scss">
	.list-add {
		line-height: 88rpx;
		border-radius: 8rpx;
		background-color: rgba($color: #1573FF, $alpha: 0.26);
		color: #1573FF;
	}
	.u-form {
		margin: 10px;
		padding: 22rpx;
		background-color: $xz-bgColor-write;
	}
	.delete {
		display: flex;
		color: $xz-textColor-red;
		font-size: 24rpx;
		justify-content: flex-end;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}
	.bottom {
		position: fixed;
		width: 100%;
		height: 120rpx;
		bottom: 0;
		z-index: 999;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;
		color: $xz-textColor-FF;

	}
	.bottom-add {
		width: 90%;
		line-height: 88rpx;
		border-radius: 44rpx;
		background-color: $xz-bgColor-blue;
		color: $xz-textColor-FF;
		font-size: 30rpx;
		margin: 11rpx;
		
	}
	
</style>
